<template>
  <div>
    <h4>我是儿子组件</h4>
    <div>sonMoney：{{ sonMoney }}，sonPerson：{{ sonPerson }}</div>
    <button @click="handleChangeSonMoney">点击修改值 sonMoney</button>
    <button @click="handleChangeSonPerson">点击修改值 sonPerson</button>
    <button @click="handleChangeAll">点击修改两个值</button>
  </div>
</template>

<script setup lang="ts">
// defineProps 也是个泛型函数，可以通过传递泛型变量指定 props 的类型
// js 写法：
// const props = defineProps({
//   sonMoney: Number
// })
// ts 写法：
const props = defineProps<{
  sonMoney: number
  sonPerson: string
}>()
console.log('这是儿子组件里的num：', props.sonMoney);

// 使用 defineEmits
// js 写法：
// const emit = defineEmits(['changeSonMoney', 'changeSonPerson', 'changeAll'])

// ts 写法：
// eventName 为父传子的接收的键名，value 为子传父的值的键名，两个键名都是自定义取名
const emit = defineEmits<{
  (eventName: 'changeSonMoney', value: number): void
  (eventName: 'changeSonPerson', value: string): void
  (eventName: 'changeAll', value1: number, value2: string): void
}>()

const handleChangeSonMoney = () => {
  emit('changeSonMoney', 500)
}
const handleChangeSonPerson = () => {
  emit('changeSonPerson', '嘎嘎')
}
const handleChangeAll = () => {
  emit('changeAll', 888, '哈哈哈')
}

</script>

<style scoped></style>